<template>
	<view>
		<!-- 主图和简介 +++++++++++++++++++++ -->
		<course-header :course="course"></course-header>

		<view class="course-details" :style="'height:' + pageHeight + 'px'">
			<!-- 标签选项卡 -->
			<tab-bar :tabs="tabs" v-model="tabIndex"></tab-bar>
			<swiper class="swiper-box" circular :duration="300" :current="tabIndex" @change="changeTab">
				<swiper-item v-for="(item, index) in tabs" :key="index">
					<scroll-view id="scroll-box" class="scroll-box" :scroll-y="enableScroll" upper-threshold="0"
						@scrolltoupper="scrolltoupper">
						<view class="details-info">
							<!-- +++++++++++++++++++++ -->
							<course-info v-if="index==0" :detailUrls="course.detailUrls"></course-info>
							<course-dir v-if="index==1" :chapterList="chapterList" :isBuy="isBuy" @playVideo="playVideo"
								:activeObj="activeObj"></course-dir>
							<course-comment v-if="index==2" :commentList="commentList">
							</course-comment>
							<course-group v-if="index==3" :groupList="groupList"></course-group>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<!-- 试看 -->
			<view v-if="videoUrl" @click="closePlay" class="mask video-box" @touchmove.stop.prevent="()=>{}">
				<view class="name">
					<text>免费试看</text>
					<text class="iconfont icon-close"></text>
				</view>
				<video id="playVideo" class="video" :src="videoUrl">
				</video>
			</view>
			<!-- 立即购买 -->
			<bottom-btn :btnText="isBuy||course.isFree ? '立即观看': '立即购买'" @clickBottom="clickBottom">
			</bottom-btn>
		</view>
	</view>
</template>
<script>
	import courseHeader from './components/course-header.vue'

	import tabBar from '@/components/common/tab-bar.vue'
	import tabs from '@/config/course-details-tabs.js'

	import courseInfo from './components/course-info.vue'
	import courseDir from './components/course-dir.vue'
	import courseComment from './components/course-comment.vue'
	import courseGroup from './components/course-group.vue'

	import bottomBtn from './components/bottom-btn.vue'

	import api from '@/api/course.js'

	export default {
		components: {
			courseHeader,
			tabBar,

			courseInfo,
			courseDir,
			courseComment,
			courseGroup,

			bottomBtn

		},

		data() {
			return {
				tabs, // 标签导航
				tabIndex: 0, // 当前所在标签
				enableScroll: false, // 是否允许滚动 ++++++ 改false
				statusNavHeight: 0, // 状态栏+导航高度
				pageHeight: 300, // 详情内容区域高度
				detailTop: 0, //详情区域距离顶部高度（头部高度）
				id: null, // 课程id
				course: {}, //课程基本信息
				chapterList: [], // 章节信息
				commentList: [], // 评论信息
				groupList: [], // 套餐信息
				isBuy: false, // 是否购买+++

				videoContext: null, //播放器实例
				videoUrl: null, // 播放视频

				activeObj: {}, //当前所选视频下标对象 ++++
			}
		},
		// 实时监听页面滚动 （与methods同级）
		onPageScroll(e) {
			// console.log('实时监听页面滚动', e.scrollTop)

			// 到达页面底部问题，触发了onReachBottom底部事件，后面还会触发onPageScroll，
			// 这样会导致enableScroll会变成false，导致页面到底部了，详情区域也不可以
			// 当页面滚动条到达底部时，就是滚动条距离 <= 选项卡到顶部距离，开启详情区域纵向滚动
			if (this.detailTop - this.statusNavHeight <= e.scrollTop) {
				// 可以滚动详情区域
				this.enableScroll = true
				return
			}

			// 当前滚动条距离顶部高度 小于 详情标签到顶部高度
			if (this.enableScroll && e.scrollTop < this.detailTop) {
				//禁止详情滚动
				this.enableScroll = false
			}
		},
		onReady() {
			// 获取video实例, 注意 video 组件上声明 id="playVideo"
			this.videoContext = uni.createVideoContext('playVideo', this)
			//获取详情区域距离顶部高度
			let view = uni.createSelectorQuery().in(this).select(".course-details");
			view.fields({
				rect: true
			}, data => {
				// console.log("节点的顶部高度为" + data.top);
				this.detailTop = data.top
			}).exec();
		},
		onLoad(option) {
			console.log(option);
			//获取当前页面视口高度
			this.getPageHeight()

			// #ifdef APP-PLUS
			// 禁用点击状态栏回到顶部
			this.noStatusScrollTop()
			// #endif
			// 查询数据
			this.id = option.id
			this.loadData()
		},
		// 到达页面底部触发（与methods同级）
		onReachBottom() {
			// 详情区域可滚动
			this.enableScroll = true
		},

		methods: {
			// 加载数据
			loadData() {
				//查询课程是否已购买 +++
				this.getCourseIsBuy()

				this.getCourseById()
				this.getChapterSectionList()
				this.getCourseCommentList()
				this.getCourseGroupList()
			},
			// 试看视频
			playVideo(obj) {
				if (this.isBuy) {
					// 已购买视频播放页
					this.navTo(`/pages/course/course-play?id=${this.courseId}`)
					return
				}
				this.activeObj = obj.activeObj // ++++
				this.videoUrl = obj.section.videoUrl
				this.$nextTick(() => {
					this.videoContext.play()
				})
			},
			// 关闭播放弹窗
			closePlay() {
				this.videoContext.stop()
				this.videoUrl = null
			},
			// 点击底部按钮触发
			clickBottom() {
				if (this.isBuy || this.course.isFree) {
					// 已购买过或免费，跳转视频播放页面
					uni.navigateTo({
						url: `/pages/course/course-play?id=${this.id}`
					})
				} else {
					// 未购买过，跳转确认购买页
					// 未购买过，跳转确认购买页
					uni.navigateTo({
						url: `/pages/order/confirm-buy?course=` +
							encodeURIComponent(JSON.stringify(this.course))
					})
					// console.log("未购买过，跳转确认购买页");
				}
			},
			//查询课程是否已购买
			async getCourseIsBuy() {
				// 如果已登录，则判断是否已购买
				const token = uni.getStorageSync('mxgEducationToken')
				if (token) {
					const {
						data
					} = await api.getCourseIsBuy(this.id)
					this.isBuy = data.isBuy
				}
			},
			// 查询课程基本信息
			async getCourseById() {
				const {
					data
				} = await api.getCourseById(this.id)
				this.course = data
				console.log(this.course);
				// 将课程名称赋值导航标题
				uni.setNavigationBarTitle({
					title: data.title
				})
			},

			// 查询章节列表数据
			async getChapterSectionList() {
				const {
					data
				} = await api.getChapterSectionList(this.id)
				this.chapterList = data
			},

			// 查询评论列表数据
			async getCourseCommentList() {
				const {
					data
				} = await api.getCourseCommentList(this.id)
				this.commentList = data
				console.log(this.commentList);
			},

			// 查询套餐搭配数据
			async getCourseGroupList() {
				const {
					data
				} = await api.getCourseGroupList(this.id)
				this.groupList = data
			},
			// 禁用点击状态栏回到顶部
			noStatusScrollTop() {
				const webview = this.$scope.$getAppWebview();
				webview.setStyle({
					'scrollsToTop': false
				})
			},
			// 左右切换时触发
			changeTab(e) {
				this.tabIndex = e.detail.current
				// 切换选项，将页面滚动条切换到底部 ++
				uni.pageScrollTo({
					scrollTop: this.detailTop,
					duration: 300
				})
			},

			// scroll-view 滚动到顶部时触发（methods中定义）
			scrolltoupper() {
				// 页面区域也回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 150
				})
				// 滚动到页面顶部，禁用详情滚动
				this.enableScroll = false
			},
			//获取当前页面视口高度
			getPageHeight() {
				const res = uni.getSystemInfoSync()
				// 平台
				const system = res.platform
				// 状态栏高度
				const statusBarHeight = res.statusBarHeight
				// 状态栏+导航高度
				if (system === 'android') {
					this.statusNavHeight = (48 + statusBarHeight)
				} else if (system === 'ios') {
					this.statusNavHeight = (44 + statusBarHeight)
				}
				// console.log('statusNavHeight', this.statusNavHeight)

				// screenHeight 是整合手机屏幕的高度，
				// windowHeight 是webview（不包括手机通知栏、小程序标题栏和tabBar）的页面高度；
				// 如果导航是渐变效果, 上面两个值是一样的，需要自己计算，减去后面显示出来的状态导C航高
				// 页面视口高度
				this.pageHeight = res.windowHeight - this.statusNavHeight
			},
		},
	}
</script>
<style lang="scss">
	.video-box {
		z-index: 100;
		text-align: center;

		.video {
			width: 750rpx;
			height: 420rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.name {
			position: relative;
			top: 380rpx;
			color: #FFFFFF;
			font-size: 38rpx;
			font-weight: bold;
		}

		.icon-close {
			margin-left: 20rpx;
		}
	}

	.course-details {
		// 内容超出空页面高度时，启动 scroll-view 滚动
		overflow: hidden;

		.swiper-box,
		.scroll-box {
			height: 100%;
		}

		.details-info {
			// 解决底部被遮挡隐藏（底部有：立即购买）
			padding-bottom: 180rpx;
		}
	}

	/*遮罩蒙层*/
	.mask {
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
	}
</style>
